<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Start ~ page</title>
  <!-- <link rel="icon" href="logo.png" type="image/icon type"> -->
  <style type="text/css">
    html {
      background-image: url("/home/x/startpage/bg.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      color: #cfd1dd;
      font-size: 16px; font-family: "Hack Nerd Font Mono", "Droid Sans Mono", "Liberation Sans Mono", monospace;
      height: 100%;
    }
    body {
      background-color: #161720;
      box-shadow: 0px 0px 5px 4px #161720;
      color: #cfd1dd;
      min-height: 30ch;
      min-width: 50px;
      width: 40%;
      max-width: 800px;
      padding: 1em;
      display: flex;
      flex-direction: column;
      /*justify-content: center;*/
    }
    @media only screen and (max-width: 1250px) {
      body {
        width: 50%;
      }
    }
    @media only screen and (max-width: 950px) {
      body {
        width: 70%;
      }
    }
    @media only screen and (max-width: 450px) {
      body {
        width: 100%;
      }
    }
    p {
      margin: 0;
    }
    p span {
      color: #aeb1ff;
    }
    a {
      color: #aeb1ff;
      text-decoration: none;
      padding: .3em 0;
    }
    a:focus, a:hover {
      color: #7DA6FF;
    }
    nav {
      column-gap: .3em;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
      padding: 1em 0;
    }
    p #ps1 {
      color: #aeb1ff;
    }
    p #prompt {
      color: #a3be8c;
      font-family: "Hack Nerd Font Mono", "Droid Sans Mono", "Liberation Sans Mono", monospace;
    }
    p #cursor {
      background-color: #aeb1ff;
      animation: blink 1s infinite;
    }
    @keyframes blink {
      0% { opacity: 0; }
      49% { opacity: 0; }
      50% { opacity: 1; }
    }
    .data {
      background: transparent;
      width: 89%;
      border: none;
      outline:0;
      color: transparent;
      text-shadow:0 0 0 #cfd1dd;
      caret-color: #aeb1ff;
      font-size: 16px; font-family: "Hack Nerd Font Mono", "Droid Sans Mono", "Liberation Sans Mono", monospace;
    }
  </style>
  <script>
    function send_data(event){
      var str = document.getElementById("pososi").value;
      if(event.keyCode == 13){
        if(str != ""){
          window.open("https://duckduckgo.com/?q=" + str, '_blank');
          // location = "https://startpage.com/do/search?q=" + str;
        }
      }
    }
  </script>
</head>
<body>
  <p><span id="ps1">~ </span><span id="prompt"> > </span>ls</p>
  <nav>
    <a id="url" href="https://animego.org/">animego</a>
    <a id="url" href="https://shiza-project.com/">shiza</a>
    <a id="url" href="https://shikimori.one/">mori</a>
    <a id="url" href="https://jut.su/">jutsu</a>
    <a id="url" href="https://aniu.ru/">aniu</a>
    <a id="url" href="https://yggdrasil-network.github.io/services">yggdrasil</a>
    <a id="url" href="https://notabug.org/">nab</a>
    <a id="url" href="https://github.com/">git</a>
    <a id="url" href="https://nnmclub.to/">nnm</a>
    <a id="url" href="https://hanime.tv/">relax</a>
  </nav>
  <p>
    <span id="ps1">~ </span>
    <span id="prompt"> > </span>
      <input id="pososi" onkeypress="send_data(event)" autocomplete=off class=data type = text autofocus maxlength="2048">
    </span>
  </p>
</body>
</html>
